<div class="card">
  <div class="card-header">
    <h4 class="card-title">
      迁移进度
    </h4>
  </div>

  <div class="card-body">
    <div class="row">
      <h4 class="card-title"><i class="bi bi-globe"></i>扩容进度</h4>
    </div>
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover" id="tableDataList">
        <thead>
        <tr>
          <th>id</th>
          <th>slot迁移进度</th>
          <th>目标源实例</th>
          <th>开始结束slot</th>
          <th>正在迁移的slot</th>
          <th>状态</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <#list instanceReshardProcessList as instanceReshardProcess>
          <tr>
            <td>${instanceReshardProcess.id!}</td>
            <td>
              <div class="progress progress-fs-1">
                <div id="reshardSlotProgress${instanceReshardProcess.id!}" class="progress-bar bg-success"
                     role="progressbar" aria-valuenow="${instanceReshardProcess.finishSlotNum!}" aria-valuemax="${instanceReshardProcess.totalSlot!}"
                     aria-valuemin="0" style="width: ${(instanceReshardProcess.finishSlotNum) / (instanceReshardProcess.totalSlot)}; overflow: visible;">
                  <span style="color: #000000; margin-bottom: 0">
                    <span id="finishSlotNum${instanceReshardProcess.id!}">${instanceReshardProcess.finishSlotNum!}</span>&nbsp;&nbsp;Finish/<span id="totalSlot${instanceReshardProcess.id!}">${instanceReshardProcess.totalSlot!}</span>&nbsp;&nbsp;Total
                  </span>
                </div>
              </div>
            </td>
            <td id="sourceTargetInstance${instanceReshardProcess.id!}">
              ${instanceReshardProcess.sourceInstanceId!}(${instanceInfoMap?api.get(instanceReshardProcess.sourceInstanceId).ip!}:${instanceInfoMap?api.get(instanceReshardProcess.sourceInstanceId).port!})
              -->
              ${instanceReshardProcess.targetInstanceId!}(${instanceInfoMap?api.get(instanceReshardProcess.targetInstanceId).ip!}:${instanceInfoMap?api.get(instanceReshardProcess.targetInstanceId).port!})
            </td>
            <td id="startEndSlot${instanceReshardProcess.id!}">
              ${instanceReshardProcess.startSlot!}
              -->
              ${instanceReshardProcess.endSlot!}
            </td>
            <td id="migratingSlot${instanceReshardProcess.id!}">
              ${instanceReshardProcess.migratingSlot!}
            </td>
            <td id="statusDesc${instanceReshardProcess.id!}">
              <#if (instanceReshardProcess.status == 0)>
                运行中
              <#elseif (instanceReshardProcess.status == 1)>
                完成
              <#elseif (instanceReshardProcess.status == 2)>
                出错
              </#if>
            </td>
            <td>
              ${instanceReshardProcess.startTime?string("yyyy-MM-dd HH:mm:ss")}
            </td>
            <td id="endTime${instanceReshardProcess.id!}">
              <#if (instanceReshardProcess.status == 1)>
                ${instanceReshardProcess.endTime?string("yyyy-MM-dd HH:mm:ss")}
              </#if>
            </td>
            <td>
              <#if (instanceReshardProcess.status == 2)>
                <button id="retryBtn${instanceReshardProcess.id!}"  type="button" class="btn btn-danger btn-sm" onclick="retryHorizontalScale('${instanceReshardProcess.id!}', '${request.contextPath}')">
                  重试
                </button>
              </#if>
            </td>
          </tr>
        </#list>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function(){
    function show(){
      var auditId = document.getElementById("appAuditId").value
      var url = "${request.contextPath}/manage/app/showReshardProcess.json?auditId=" + auditId;
      $.get(url, function(data) {
        var dataArr = eval("(" + data + ")");
        var length = dataArr.length;

        for (var i = 0; i < length; i++) {
          var data = dataArr[i];
          var id = data.id;
          var appId = data.appId;
          var finishSlotNum = data.finishSlotNum;
          var totalSlot = data.totalSlot;
          var status = data.status;
          var statusDesc = data.statusDesc;
          var migratingSlot = data.migratingSlot;
          var endTimeFormat = data.endTimeFormat;
          document.getElementById("finishSlotNum" + id).innerHTML = finishSlotNum;
          document.getElementById("totalSlot" + id).innerHTML = totalSlot;
          document.getElementById("reshardSlotProgress" + id).style.width = (finishSlotNum * 100 / totalSlot ) + "%";
          document.getElementById("statusDesc" + id).innerHTML = statusDesc;
          document.getElementById("migratingSlot" + id).innerHTML = migratingSlot;
          //如果完成显示结束时间
          if (status == 1) {
            document.getElementById("endTime" + id).innerHTML = endTimeFormat;
          }
          //非出错不显示
          if (status != 2) {
            var retryBtn = document.getElementById("retryBtn" + id);
            if (retryBtn != null) {
              retryBtn.style.display = "none";
            }
          }
        }
      });
    }
    setInterval(show,2000);// 注意函数名没有引号和括弧！
    // 使用setInterval("show()",3000);会报“缺少对象”
  });
</script>
